<template>
  <div :id="id" class="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
import china from '../map/china2.json'
import zhejiang from '../map/zhejiang/index.json'
import sichuan from '../map/sichuan/index.json'
import mianyang from '../map/sichuan/mianyang.json'
// import guizhou from '../map/guizhou/index.json'
import lishui from '../map/zhejiang/lishui.json'
// import http from '@/utils/request'

export default {
  name: 'MapEcharts',
  data() {
    return {
      id: this.generatorOnlyId(),
      cityName: '中国',
      myChart: null,
      json: china,
      cityList: [],
      index: 0,
      oneMapList: [],
      timer: null,
      currentName: '',
      cityResultList: [],
    }
  },
  props: {
    currentBackName: {
      type: String,
      default: '',
    },
    transmitCityName: {
      type: String,
      default: '龙游县',
    },
    bgcColor: {
      type: Array,
      default() {
        return ['#10B9E7', '#F57474', '#56D0E3', '#F8B448', '#F8B78F', '#feAd40']
      },
    },
    provinceList: {
      type: Array,
      default() {
        return []
      },
    },
  },

  watch: {
    currentBackName(val) {
      // console.log(val)
      this.cityName = val
      if (val === '中国') {
        this.json = china
        this.cityName = '中国'
      } else if (val === '浙江省') {
        this.json = zhejiang
        this.cityName = '浙江省'
      } else if (val === '四川省') {
        this.json = sichuan
        this.cityName = '四川省'
      }
      this.index = 0
      this.drawChart(val === '中国' ? 'init' : '')
    },

    cityName(val) {
      this.drawChart(val === '中国' ? 'init' : '')
    },
    oneMapList() {
      this.drawChart()
    },
    provinceList: {
      handler: function (val, oldVal) {
        if (val.length > 0) {
          let data = []
          let temp = []
          val.forEach((item, index) => {
            data.push({
              name: item.province,
              value: item.merchantCount,
            })
            temp.push(item.province)
          })
          for (let i = 0; i < this.json.features.length; i++) {
            if (!temp.includes(this.json.features[i].properties.name)) {
              data.push({
                name: this.json.features[i].properties.name,
                value: 0,
              })
            }
          }
          this.cityResultList = data
          this.drawChart('init')
        }
      },
      deep: true,
    },
  },
  mounted() {
    /*this.$nextTick(function () {
      this.drawChart('init')
    })*/

    this.$bus.on('currentCityNameHeader', (name, lv) => {})
    window.addEventListener('resize', () => {
      this.myChart.resize() // 监听宽度 重新绘制
    })
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
    this.myChart.clear()
  },

  methods: {
    sonReturn() {
      this.$nextTick(function () {
        this.myChart.resize()
      })
    },
    // 生成图表的唯一ID
    generatorOnlyId() {
      return Math.floor(Math.random() * 10000)
    },
    // 绘制
    drawChart(param) {
      if (this.myChart !== null) {
        this.myChart.off('click')
        this.myChart.off('mousemove')
        this.myChart.off('mouseout')
        this.myChart.dispose()
      }
      this.myChart = echarts.init(document.getElementById(this.id))
      if (this.myChart === undefined) {
        // console.error(`echarts init dom id ${this.id} failed`);
        return
      }
      this.myChart.clear()
      // console.log(_that.json)
      echarts.registerMap(this.cityName, { geoJSON: this.json }) //引入地图文件
      this.myChart.setOption(this.myEchart(param), true)
      this.echartAffair()
    },

    myEchart(param) {
      let _that = this
      let option = {
        tooltip: {
          showDelay: 200,
          trigger: 'item',
          backgroundColor: 'rgba(21,47,164, 0.45)',
          borderColor: '#fff',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 16,
          },
          position: function (p) {
            //其中p为当前鼠标的位置
            return [p[0] - 80, p[1] - 50]
          },
          formatter: function (params) {
            // console.log(params);
            // let componentSubType = params.componentSubType
            // let v = params.data;
            // if (componentSubType === 'scatter') {
            //   return ;
            // }
            return `
                <div>${params.name}</div>
            `
          },
        },
        geo: {
          show: false,
          roam: false,
          map: _that.cityName,
        },
        series: [
          {
            type: 'map',
            show: true,
            // mapType: _that.cityName,//地图名称
            map: _that.cityName,
            selectedMode: false,
            aspectScale: 1,
            //  zoom: 1.2,
            // y: 30,
            zoom: 1.2,

            itemStyle: {
              normal: {
                label: {
                  show: true, //默认是否显示省份名称
                  color: '#fff',
                  fontSize: _that.$echartsFontSize.fs(15),
                },

                areaColor: '#0F1743',
                borderWidth: 1,
                borderColor: '#BCCCE1',
              },
              emphasis: {
                label: {
                  show: true, //选中状态是否显示省份名
                  color: '#fff',
                  fontWeight: 'bold',
                  fontSize: _that.$echartsFontSize.fs(18),
                },
                shadowColor: 'rgba(0,214,213,0.45)',
                shadowBlur: 30,
                areaColor: '#091C4D', //选中状态的地图板块颜色
                borderWidth: 1,
                borderColor: '#31C5FE',
              },
            },
            data: this.cityResultList,
          },
        ],
      }
      if (param === 'init') {
        option['visualMap'] = {
          type: 'piecewise',
          splitNumber: 3,
          min: 1,
          max: 99999,
          align: 'left',
          right: 20,
          bottom: 20,
          itemWidth: 60,
          itemHeight: 20,
          itemGap: 5,
          // itemSymbol: 'circle',
          orient: 'vertical',
          //区域颜色
          color: ['#FF0000', '#FF8200', '#F4A523', '#29389F'],
          //区域颜色范范围
          pieces: [
            { min: 0, max: 499, label: '500户以下' },
            { min: 500, max: 1000, label: '500-1000户' },
            { min: 1000, max: 1500, label: '1000-1500户' },
            { min: 1500, max: 99999999, label: '1500户以上' },
          ],
          textStyle: {
            color: '#fff',
            fontSize: 14,
          },
        }
      }
      return option
    },

    echartAffair() {
      let _that = this

      clearInterval(_that.timer)

      _that.myChart.on('click', function (params) {
        clearInterval(_that.timer)
        _that.timer = null
        let cityList = ['中国']
        if (params.name === '浙江省') {
          cityList = ['中国', '浙江省']
          _that.json = zhejiang
          _that.cityName = params.name
          _that.index = 0
          _that.drawChart()
          _that.$emit('currentCityList', cityList)
          _that.$bus.emit('currentCityName', '浙江省', 2, cityList)
          _that.$bus.emit('currentCityNameHeader', '浙江省', 2)
        } else if (params.name === '丽水市') {
          cityList = ['中国', '浙江省', '丽水市']
          _that.cityList = cityList
          _that.json = lishui
          _that.cityName = params.name
          _that.index = 0
          _that.drawChart()
          _that.$emit('currentCityList', cityList)
          _that.$bus.emit('currentCityName', params.name, 3, cityList)
          _that.$bus.emit('currentCityNameHeader', params.name, 3)
        } else if (params.name === '四川省') {
          cityList = ['中国', '四川省']
          _that.json = sichuan
          _that.cityName = params.name
          _that.index = 0
          _that.drawChart()
          _that.$emit('currentCityList', cityList)
          _that.$bus.emit('currentCityName', '四川省', 2, cityList)
          _that.$bus.emit('currentCityNameHeader', '四川省', 2)
        } else if (params.name === '绵阳市') {
          cityList = ['中国', '四川省', '绵阳市']
          _that.cityList = cityList
          _that.json = mianyang
          _that.cityName = params.name
          _that.index = 0
          _that.drawChart()
          _that.$emit('currentCityList', cityList)
          _that.$bus.emit('currentCityName', params.name, 3, cityList)
          _that.$bus.emit('currentCityNameHeader', params.name, 3)
        } else if (params.name === '三台县') {
          _that.$router.push('/llSantai')
        }

        if (_that.cityList.length === 3) {
          _that.$bus.emit('currentCityData', params.name)
        } else {
          // console.log('11111==')
          // _that.$bus.emit('currentCityData', '')
        }
      })
    },
  },
}
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
